<template>
  <!-- <el-row>
    <el-col :span="12">
      <el-card>
        <div id="main" style="width: 700px; height: 450px;"></div>
      </el-card>
    </el-col>
  </el-row> -->
  <el-row>
    <el-col >
      <el-card>
       <div style="margin: 10px;"><h3 style="margin-top: 10px;">今日营业额:{{todayInfo}}元</h3>
        <i style="float: right;">今日:{{ formattedTime }}</i>
      </div>
      </el-card>
    </el-col>
  </el-row>
  <el-row :gutter="20">
    <el-col :span="12">
      <div class="grid-content ep-bg-purple" />
      <el-card style="max-width: 900px">
        <div id="main" style="width: 700px; height: 450px;"></div>
      </el-card>
    </el-col>
    <el-col :span="12">
      <div class="grid-content ep-bg-purple" />
      <el-card style="max-width: 900px">
        <div id="main2" style="width: 700px; height: 450px;"></div>
      </el-card>
    </el-col>

  </el-row>
</template>

<script setup>
import * as echarts from 'echarts';

import adminApi from '@/api/admin';
import { onMounted, ref } from 'vue';
const todayInfo=ref('');
const now = new Date();
const year = now.getFullYear();
const month = ('0' + (now.getMonth() + 1)).slice(-2);
const day = ('0' + now.getDate()).slice(-2);
const formattedTime = `${year}-${month}-${day}`
console.log(formattedTime);

function today(){
  adminApi.todayInfo()
    .then(resp => {
      todayInfo.value=resp.data
    })
}
console.log(todayInfo);

//图1
function chart01() {
  adminApi.roomIn()
    .then(resp => {
      let data = new Array();
      let count = new Array();
      for (let index = 0; index < resp.data.length; index++) {
        data.push(resp.data[index].rname);
        count.push(resp.data[index].ct);
      }
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('main'));

      // 指定图表的配置项和数据
      var option = {
        title: {
          text: '各个房间型今日入住情况',
          textStyle: {
            color: '#000000'
          }
        },
        tooltip: {},
        legend: {
          data: ['入住数量'],
          textStyle: {
            color: '#000000'
          }
        },
        xAxis: {
          data: data,
          axisLine: {
            show: true,
            lineStyle: {
              color: '#000000'
            }
          }
        },
        yAxis: {},
        series: [
          {
            name: '入住数量',
            type: 'bar',
            data: count,

          }
        ]
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    })
}
//图2
function chart02() {
  adminApi.roomRprice()
    .then(resp => {
      let data = new Array();
      let price = new Array();
      for (let index = 0; index < resp.data.length; index++) {
        data.push(resp.data[index].rname);
        price.push(resp.data[index].rprice);
      }
      var myChart = echarts.init(document.getElementById('main2'));
      var option = {
        title: {
          text: '房间今日收入',
          subtext: '/元',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: '房型今日收入',
            type: 'pie',
            radius: '50%',
            data: [
              {value:price[0],name:data[0]},
              {value:price[1],name:data[1]},
              {value:price[2],name:data[2]},
              {value:price[3],name:data[3]},
              {value:price[4],name:data[4]}
              // { value: 1, name: 'ss' },
              // { value: 2, name: 'Direct' },
              // { value: 3, name: 'Email' },
              // { value: 4, name: 'Union Ads' },
              // { value: 5, name: 'Video Ads' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    })
}
chart02()
chart01()
today();

</script>
<style scoped>
.el-row {
  margin-bottom: 30px;
}

.el-row:last-child {
  margin-bottom: 0;
}

.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
</style>